<link rel="stylesheet" th:href="@{/pages/css/setting.css}" href="../../static/pages/css/setting.css"/>

<div class="layui-card-header">
    <h2 class="header-title">多标签：</h2>
    <div class="pull-right layui-form">
        <input type="checkbox" lay-skin="switch" lay-text="ON|OFF" id="set-tab" lay-filter="set-tab" checked/>
    </div>
</div>

<div class="layui-card-header">
    <h2 class="header-title">主题方案：</h2>
</div>

<div class="theme-div">
    <div class="btnTheme layui-this">
        <img th:src="@{/global/theme/img/black_white.png}" src="../../static/global/theme/img/black_white.png" title="黑白主题">
    </div>
    <div class="btnTheme" theme="theme-black" title="黑灰主题">
        <img th:src="@{/global/theme/img/dark_grey.png}" src="../../static/global/theme/img/dark_grey.png">
    </div>
    <div class="btnTheme" theme="theme-black" title="黑灰主题">
        <img th:src="@{/global/theme/img/black_red.png}" src="../../static/global/theme/img/black_red.png">
    </div>
</div>

<!--<div class="layui-card-header"><h2 class="header-title">设置主题：</h2></div>
<div class="layui-card-body layui-text">
    <a th:href="@{/home/setTheme}" href="/home/setTheme" class="layui-btn" style="background-color: #009688;">默认主题</a>
    <a th:href="@{/home/setTheme?themeName=darkGrey}" href="/home/setTheme?themeName=darkGrey" class="layui-btn layui-btn-normal">深灰色主题</a>
</div>-->

<script>
    layui.use(['form', 'index', 'admin'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let index = layui.index;
        let admin = layui.admin;

        /*切换多标签*/
        $('#set-tab').prop('checked', index.pageTabs);
        form.render('checkbox');

        form.on('switch(set-tab)', function (data) {
            if (data.elem.checked) {
                location.reload();
            } else {
                index.pageTabs = false;
                index.checkPageTabs();
                admin.refresh();
                admin.closePopupRight();
            }
        });


        // 切换主题
        function doChangeTheme(theme) {
            $('.btnTheme').removeClass('layui-this');
            if (theme) {
                $('.btnTheme[theme=' + theme + ']').addClass('layui-this');
                // layui.data('easyweb', {key: 'theme', value: theme});
                admin.putLocalData("theme", theme);
            } else {
                $('.btnTheme').eq(0).addClass('layui-this');
                // layui.data('easyweb', {key: 'theme', remove: true});

                admin.putLocalData("theme", null);
            }
            try {
                top.layui.admin.changeTheme(theme ? getThemeDir() + theme + '.css' : theme);
            } catch (e) {
                console.warn(e);
            }
        }

        doChangeTheme(layui.data('easyweb').theme);

        // 切换主题
        $('.btnTheme').click(function () {
            var theme = $(this).attr('theme');
            doChangeTheme(theme);
        });

    })
    ;
</script>